<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>后台教师注册页面</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="后台管理系统">
<meta name="description" content="后台管理系统">
<meta name="author" content="soulCoder">
  <link href="css/bootstrap.min.css"  rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
  <!-- 上传控件-->
  <link  th:href="@{/static/js/plugins/fileinput/css/fileinput.css}" media="all" rel="stylesheet" type="text/css" />
  <link  rel="stylesheet" th:href="@{/static/css/materialdesignicons.min.css}">
  <link  rel="stylesheet" th:href="@{/static/css/style.min.css}">
  <!--对话框-->
  <link rel="stylesheet" th:href="@{/static/js/jconfirm/jquery-confirm.min.css}">
  <!-- 引入表单验证器-->
  <link rel="stylesheet" th:href="@{/static/js/plugins/validator/css/bootstrapValidator.css}" />
<style>
.coder-wrapper {
    position: relative;
}
.coder-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
</style>
</head>
  
<body>
<div class="row coder-wrapper">
  <div class="coder-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a href="../index.html"><span style="font-size:36px;color:black">在线考试系统注册页</span></a>
      </div>
      <!-- id="teacherRegForm"     id="file-pic"     data-method='regSaveTeacher'-->
      <form id="teacherRegForm" method="post" enctype="multipart/form-data">
        <div class="modal-body">
          <div class="form-group">
            <label for="recipient-username" class="control-label">老师名称：</label>
            <input type="text" class="form-control" name="username" id="recipient-username">
          </div>
          <div class="form-group">
            <label for="recipient-email" class="control-label">邮箱：</label>
            <input type="text" class="form-control" name="email" id="recipient-email">
          </div>
          <div class="form-group">
            <label for="recipient-tel" class="control-label">电话号码：</label>
            <input type="text" class="form-control" name="tel" id="recipient-tel">
          </div>

          <div class="form-group">
            <label for="recipient-password" class="control-label">密码：</label>
            <input type="password" class="form-control" name="password" id="recipient-password">
          </div>
          <div class="form-group">
            <label  class="control-label">性别:</label>
            <div class="clearfix">
              <label class="coder-radio radio-inline radio-primary">
                <input type="radio"  name="sex" value="0"><span>女</span>
              </label>
              <label class="coder-radio radio-inline radio-primary">
                <input type="radio" name="sex" value="1" checked><span>男</span>
              </label>
            </div>
          </div>

          <!-- 头像上传-->
          <div class="form-group">

              <input id="file-pic" name="file" type="file" value="上传" multiple/>
              <p class="help-block">支持jpg、jpeg、png、gif,txt,"docx","zip","xlsx"格式，大小没限制</p>

          </div>

        </div>
        <div class="modal-footer row">

          <div class="col-lg-12">
            <button type="button" data-method='regSaveTeacher' class="btn btn-primary">提交保存</button>
            <button type="button" data-method='toLogin' class="btn btn-primary">返回登录</button>
          </div>
        </div>
      </form>
      <hr>

    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}"></script>
<!-- 上传控件-->
<script type="text/javascript"  th:src="@{/static/js/plugins/fileinput/js/fileinput.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/plugins/fileinput/js/locales/zh.js}"></script>

<script type="text/javascript"  th:src="@{/static/js/jquery.serialize-object.min.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/jconfirm/jquery-confirm.min.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/plugins/validator/js/bootstrapValidator.js}"></script>

<script type="text/javascript">

  $(function(){
      var userId ;
      $("button,a").on('click',function(){
          //获取到 a标签里面配置 data-method
          var methodName = $(this).data('method');
          if(methodName){
              doMethod[methodName]();
          }
      });
      var doMethod = {
          toLogin: function () {
             window.location.href="/toLogin";
          },
          regSaveTeacher:function(){
            //1 保存代码
            //(1)获取验证框，看一下是否验证通过 看一下是否验证通过（即填写信息是否符合要求的规定，如密码不能少于多少位）
            var bootstrapValidator = $('#teacherRegForm').data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
              //(2)如果通过 发送ajax到后台数据(先获取到数据再发送)
              let formParamObj = $('#teacherRegForm').serializeObject();
              $.ajax({
                url:'/teacher/regTeacher',//前台和后台数据发送和返回的路径
                type:'POST',
                data:formParamObj,
                success:function(data){
                  //获取保存功能的用户id
                  if(data.isSuccess){
                    userId = data.userid; //(0)获取保存功能的用户id,这个用户id是用来 上传图片,头像用的  变量保存userId; 
                    //2 触发上传  头像上传 id="file-pic"
                    if($('#file-pic').val() != null){//(1)不为空，即上传框有值
                      $('#file-pic').fileinput('upload');//（2）触发fileinput('upload')上传方法 参数
                    }

                  }
                }
              })

            }

          }
      }

    //上传图片 --定义上传框 进入fileinput方法   （这些是框架模板 ）
      //上传
      $('#file-pic').fileinput({ //(3)fileinput方法
          //初始化上传文件框
          language: "zh",//配置语言
          showUpload : false, //显示整体上传的按钮
          showRemove : true,//显示整体删除的按钮
          uploadAsync: true,//默认异步上传
          uploadLabel: "上传",//设置整体上传按钮的汉字
          removeLabel: "移除",//设置整体删除按钮的汉字
          uploadClass: "btn btn-primary",//设置上传按钮样式
          showCaption: true,//是否显示标题
          dropZoneEnabled: false,//是否显示拖拽区域
          uploadUrl: '/file/uploadFile',//这个是配置上传调取的后台地址，本项目是SSM搭建的 （4）提交的后台路经 uploadFile方法（FileController类）
          maxFileSize : 9999,//文件大小限制
          maxFileCount: 9999,//允许最大上传数，可以多个，
          enctype: 'multipart/form-data',
          allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt"],/*上传文件格式限制*/
          msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
          showBrowse: true,
          browseOnZoneClick: true,
          slugCallback : function(filename) {
              return filename.replace('(', '_').replace(']', '_');
          },
        //(5)把参数userId提交到后台，后台接收（即根据路径 uploadUrl: '/file/uploadFile' 找到FileController类的uploadFile方法 把参数userId传过去 ）
          uploadExtraData: function(previewId, index) {   //额外参数的关键点
              //{ id: userId } //后台根据返回的userId 更新头像
              return { id: userId };
          }
      });
    //(6) 进入FileController类的uploadFile方法后  即上传完之后 根据后台返回响应信息data进行判断
      $('#file-pic').on("fileuploaded", function(event, data, previewId, index) {
          var response = data.response;
          console.log(response);
        //(7)根据返回的响应信息进行相应的判断处理
          if(response.isSuccess){
              $.confirm({//上传成功
                  title: '温馨提示',
                  content: '保存成功',
                  type: 'green',
                  buttons: {
                      omg: {
                          text: '谢谢',
                          btnClass: 'btn-green',
                      }
                  }
              });
          }else{
            //不上传图片时，不触发bootstrap 上传插件的初始化方法。仅将表单里面的（除图片以外的）内容提交到数据库
              $.confirm({//上传失败
                  title: '温馨提示',
                  content: '操作失败',
                  type: 'red',
                  buttons: {
                      omg: {
                          text: '重试',
                          btnClass: 'btn-red',
                      }
                  }
              });
          }
      });

    //***************************注册表单验证（看输入的信息合不合法）start*********************
    $('#teacherRegForm').bootstrapValidator({
      live: 'enabled',//字段值有变化就触发验证 disabled,submitted 当点击提交时验证并展示错误信息
      message: '信息不合法',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        username: {
          message: '用户名不合法',
          validators: {
            notEmpty: {
              message: '用户名必须填写,不能为空'
            },
            stringLength: {
              min: 6,
              max: 30,
              message: '长度必须是6到30个字符'
            },
            // regexp: {
            //   regexp: /^[a-zA-Z0-9_\.]+$/,
            //   message: '用户名必须有字母数字下划线组成'
            // }
          }
        },
        tel: {
          message: '电话不合法',
          validators: {
            notEmpty: {
              message: '电话号码,不能为空'
            },
            stringLength: {
              min: 11,
              max: 11,
              message: '长度必须是11位'
            },
            regexp: {
              regexp: /^1\d{10}$/,
              message: '手机号格式错误'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能空'
            },
            emailAddress: {
              message: '输入邮箱不合格'
            }
          }
        },
        password: {
          validators: {
            notEmpty: {
              message: '密码不能为空'
            },
            stringLength: {
              min: 6,
              max: 9,
              message: '密码长度6到9位'
            }
          }
        }
      }
    });
  //***************************注册表单验证end*********************
  });
</script>
</body>
</html>